/**
* @Description: 工程列表 ===> 已完工 ===> 工程量  ===>  建转运填报/施工填报
* @author
*/

<template>
  <view class="task-monitor-main">
    <nav-bar class="header" back :title="titleName" @goBack="goBack"></nav-bar>
    <view class="contentwrap">
<!--      <view class="header-bar">-->
<!--        &lt;!&ndash; 切换tab &ndash;&gt;-->
<!--        <view class="get-state-tab">-->
<!--          <view class="info-tab-item" :class="currentTab === 'non-executed' ? ' info-tab-current': ''" @click="tabChange('non-executed')">施工填报</view>-->
<!--          <view class="info-tab-item" :class="currentTab === 'executed' ? ' info-tab-current': ''" @click="tabChange('executed')">建转运填报</view>-->
<!--        </view>-->
<!--      </view>-->
      <view class="content" v-if="currentTab === 'non-executed'">

        <view class="commonItem" v-for="(item,i) in fillData" :key="i">
          <view class="commontitle">{{item.title}}</view>
          <view class=" commonbj isconcealed">
            <van-field disabled v-model="item.isSelect === '1' ? '是' : '否'" :label="item.selectTitle" input-align="right" />
          </view>
          <view class="commonbj">
            <template v-if="item.isSelect === '0'">
              <view class="signintitle">
                <view class="notes">不执行说明</view>
                <view class="notestext">
                  <van-field disabled v-model="item.notes" rows="1" autosize label="" type="textarea" class="textarea" />
                </view>
              </view>
            </template>
            <template v-else>
              <view class="equipmenttitle">
                设备照片
              </view>
              <view class="image-wrap">
                <view class="image-list">
                  <view class="upload-button" v-for="(imgItem, index) in item.fileList" :key="index">
                    <img v-if="imgItem.img" :src="imgItem.img" alt="" @click.stop="imageHandle(index,imgItem, 'PREVIEW',[i, index])">
                  </view>
                </view>
              </view>
            </template>

          </view>
        </view>


      </view>
<!--      <view class="content" v-else-if="currentTab === 'executed'">-->
<!--        <view class="commontitle">建转运信息</view>-->
<!--        <view class="commonbj isledger">-->
<!--          <van-field disabled v-model="isConcealed" label="台账维护方式" :rules="[{ required: true}]" placeholder="请选择台账维护方式" right-icon="arrow" @click-right-icon="handleSelect('ledger')" />-->
<!--        </view>-->
<!--        <view class="commonbj">-->
<!--          <van-cell-group>-->
<!--            <van-field label="设备名称" v-model="equipmentName" readonly input-align="right" />-->
<!--            <van-field disabled v-model="equipment" label="设备名称" :rules="[{ required: true}]" placeholder="请选择" right-icon="arrow" input-align="right" @click-right-icon="handleSelect('equipment')" />-->
<!--            <van-field disabled v-model="siteName" label="所属站点" :rules="[{ required: true}]" placeholder="请选择" right-icon="arrow" input-align="right" @click-right-icon="handleSelect('site')" />-->
<!--            <van-field :disabled="isDisabled" v-model="siteType" label="所属站点类型" :rules="[{ required: true}]" placeholder="请选择" right-icon="arrow" input-align="right"-->
<!--                       @click-right-icon="handleSelect('sitetype')" />-->
<!--          </van-cell-group>-->
<!--        </view>-->
<!--      </view>-->
    </view>
    <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
      <van-swipe>
        <div v-for="(image, index) in files" :key="index">
          <van-swipe-item v-if="image.img" style="text-align: center;">
            <img :src="image.img" />
          </van-swipe-item>
        </div>
      </van-swipe>
    </van-popup>
  </view>
</template>

<script>
import navBar from '../../../components/common/nav-bar'
import wx from '../../../static/common_js/jweixin_1.0.0'
import { Dialog, Toast } from 'vant'
import axios from 'axios'
import {merge} from "lodash";
import config from "../../../common/config";


export default {
  name: 'filling',
  components: { navBar },
  props: {},
  data() {
    return {
      baseUrl: "",
      queryOptions: '', // 从路由中获取的参数
      showPreview: false,
      titleName: '施工详情',
      currentTab: 'non-executed',
      currentIndex: '0',
      isConcealed: '',
      showPicker: false,
      pickerName: '是否隐蔽施工',
      projectColumns: ['是', '否'],
      files: [],
      notes: '',
      isDisabled: true,
      siteType: '',
      equipmentName: '',
      equipment: '',
      siteName: '',
      picIndex: '0',
      curType: '',
      curTypeIndex: 0,
      fillData: [
        {
          title: '安装',
          selectTitle: '是否安装',
          selectName: '否',
          isSelect: 0, // 0-否 1-是
          fileList: [
            {
              img: '',
              raw: null,
              type: ''
            }
          ],
          notes: ''
        },
        {
          title: '单机调试',
          selectTitle: '是否单机调试',
          selectName: '否',
          isSelect: 0, // 0-否 1-是
          fileList: [
            {
              img: '',
              raw: null,
              type: ''
            }
          ],
          notes: ''
        },
        {
          title: '联网调试',
          selectTitle: '是否联网调试',
          selectName: '否',
          isSelect: 0, // 0-否 1-是
          fileList: [
            {
              img: '',
              raw: null,
              type: ''
            }
          ],
          notes: ''
        },
		{
		  title: '隐蔽施工',
		  selectTitle: '是否隐蔽施工',
		  selectName: '否',
		  isSelect: 0, // 0-否 1-是
		  fileList: [
		    {
		      img: '',
		      raw: null,
		      type: ''
		    }
		  ],
		  notes: ''
		}
      ],
      equId: '', // 设备id
      neSn: '', // 设备名称
      engId: '' // 工程id
    }
  },
  created() {},
  mounted() {},
  onLoad(option) {
    this.queryOptions = JSON.parse(decodeURIComponent(option.options))
    this.equId = this.queryOptions.equId // 设备id
    this.neSn = this.queryOptions.neSn // 设备名称
    this.engId = this.queryOptions.engId // 工程id

    config.getOptions.then(res => {
      this.baseUrl = res.firstUrl;
      // this.baseUrl = 'http://192.168.0.127:18001';
    })
    this.loadFillDetail(this.equId)
  },
  computed: {},
  watch: {},
  methods: {
    loadFillDetail(objId) {
      let params = {
        objId
      }
      this.$apiRequest.gcgkApi.fillDetail(params).then(res => {
        var obj = res.data[0]
        this.fillData[0].isSelect = obj.isInstall
        this.fillData[1].isSelect = obj.isAlone
        this.fillData[2].isSelect = obj.isNetwork
        this.fillData[3].isSelect = obj.isHide
        // 备注
        this.fillData[0].notes = obj.installNotes
        this.fillData[1].notes = obj.aloneNotes
        this.fillData[2].notes = obj.networkNotes
        this.fillData[3].notes = obj.hideNotes

      
        if (obj.installFileList && obj.installFileList.length > 0) {
          console.log('-----')
          this.fillData[0].fileList = obj.installFileList.map(item => {
            item.img = this.baseUrl  + item.furl
            return item
          })
        }
        if (obj.aloneFileList && obj.aloneFileList.length > 0) {
          this.fillData[1].fileList = obj.aloneFileList.map(item => {
            item.img = this.baseUrl  + item.furl
            return item
          })
        }
        if (obj.networkFileList && obj.networkFileList.length > 0) {
          this.fillData[2].fileList = obj.networkFileList.map(item => {
            item.img = this.baseUrl  + item.furl
            return item
          })
        }
        if (obj.hideFileList && obj.hideFileList.length > 0) {
          this.fillData[3].fileList = obj.hideFileList.map(item => {
            item.img = this.baseUrl  + item.furl
            return item
          })
        }
      })
    },
    tabChange(currentTab) {
      this.currentTab = currentTab
      currentTab === 'executed' && (this.currentIndex = '1')
      currentTab === 'non-executed' && (this.currentIndex = '0')
      // this.onRefresh()
    },
    imageHandle(imgIndex, imgItem, handleType, i) {
      this.curTypeIndex = i
      if (handleType == 'PREVIEW') {
        this.files = [imgItem]
        this.showPreview = true
      }
    },
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },

    /**@url :图片服务器上的url
     * @img :图片url对应的图片
     * */
    toBase64(img) {
      const canvas = document.createElement('canvas') //创建一个canvas元素
      canvas.width = img.width //把当前url对应的图片的宽度赋予canvas
      canvas.height = img.height //把当前url对应的图片的高度赋予canvas
      const ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height) //在画布上一比一的画出img
      const base64 = canvas.toDataURL('image/jpeg') //调用canvas的toDataURL获取.jpg的base64数据
      return base64
    },
    getImageUrlBase64(url) {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.crossOrigin = 'anonymous' //处理跨域，后端也要设置跨域处理才行
        img.src = url
        img.onload = () => {
          let photoName = `${new Date().getTime()}`
          var file = this.dataURLtoFile(this.toBase64(img), `${photoName}.jpeg`)
          console.log('1111', file)
          resolve(file)
          // return this.toBase64(img);
        }
      })
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/communicationControl/completed/quantityWork?options=' + encodeURIComponent(JSON.stringify(this.queryOptions))
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.task-monitor-main {
  height: 100vh;
  background: #f2f6fa;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .contentwrap {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .header-bar {
      flex-shrink: 0;
      height: px2vh(220);
      background: #417adc;
      overflow: hidden;
      margin-top: px2vh(-1);
      .get-state-tab {
        width: calc(100% - #{px2vw(60)});
        height: px2vh(120);
        border-radius: px2vw(20);
        box-sizing: border-box;
        margin: px2vh(40) px2vw(30) px2vh(37);
        background-color: rgba(255, 255, 255, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        border: px2vw(1) solid rgba(198, 215, 245, 1);
        .info-tab-item {
          width: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: rgba(255, 255, 255, 1);
          font-weight: bold;
          font-size: px2vw(38);
          &.info-tab-current {
            height: px2vh(100);
            margin: 0 px2vw(10);
            margin-right: px2vw(10);
            border-radius: px2vw(20);
            background-color: rgba(255, 255, 255, 0.7);
            color: rgba(65, 122, 220, 1);
            font-weight: Bold;
          }
        }
      }
    }
    .content {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow-y: scroll;
      box-sizing: border-box;
      padding: 0 px2vh(30);
      padding-top: px2vh(20);
      .commontitle {
        color: #666666;
        margin: px2vh(30) 0;
        font-weight: 700;
        font-size: px2vh(40);
      }
      .commonbj {
        background-color: #fff;
        margin-bottom: px2vh(30);
        border-radius: px2vh(20);
      }
      .commonItem {
        // width: 100vw;
        box-sizing: border-box;

        .commonbj {
          background-color: #fff;
          margin-bottom: px2vh(30);
          border-radius: px2vh(20);

          .image-wrap {
            width: 100%;
            display: flex;
            .image-list {
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              padding: 0 px2vh(15) px2vh(60);
              box-sizing: border-box;
              img {
                width: px2vw(230);
                height: px2vw(230);
                border-radius: px2vw(6);
              }
              .upload-button {
                width: px2vw(230);
                height: px2vw(230);
                flex-shrink: 0;
                background-size: cover;
                position: relative;
                background-image: url('../../../static/controlImg/bg_pz.png');
                background-size: 100% px2vw(230);
                margin: px2vh(49) calc((100% - #{px2vw(690)}) / 6)  px2vh(60) calc((100% - #{px2vw(690)}) / 6);
                .typetext {
                  background-color: #fff;
                  position: absolute;
                  bottom: px2vh(-70);
                  left: calc(50% - #{px2vw(46)});
                  color: #dbdbdb;
                  font-size: px2vh(42);
                  span {
                    color: #ff4355;
                  }
                }
                .delete-icon {
                  position: absolute;
                  top: px2vw(-20);
                  right: px2vw(-20);
                  width: px2vw(40);
                  height: px2vw(40);
                  background-color: rgba(0, 0, 0, 0.7);
                  border-radius: 50%;
                  color: #fff;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
            }
          }
          .signintitle {
            flex-direction: column;
            font-size: px2vh(42);
            color: #666666;
            padding-bottom: px2vh(60);
            box-sizing: border-box;
            .notes {
              padding: px2vh(54) 0;
              box-sizing: border-box;
              border-bottom: 2px dashed #f2f6fa;
              margin: 0 px2vh(50) px2vh(54);
              span {
                color: #ff4355;
              }
            }
            .notestext {
              background-color: #fafafa;
              margin: 0 px2vh(50);
              /deep/.van-cell {
                background-color: #fafafa;
              }
            }
          }
          .equipmenttitle {
            font-size: px2vh(42);
            color: #666666;
            padding-top: px2vh(62);
            padding-left: px2vh(49);
            box-sizing: border-box;
          }
        }
      }
      .isledger {
        height: px2vh(167);
        margin-bottom: px2vh(30);
        /deep/.van-cell {
          height: px2vh(167);
          align-items: center;
          color: #666666;
          font-size: px2vh(42);
          font-weight: 700;
        }
      }
    }
  }
  footer {
    flex-shrink: 0;
    height: px2vh(155);
    background: #f2f6fa;
    padding-top: px2vh(45);
    /deep/ .van-button {
      width: calc(100% - #{px2vw(60)});
      margin-left: px2vh(30);
      height: px2vh(120);
      color: #fff;
      background-color: #417adc;
      border: 1px solid #417adc;
      border-radius: px2vh(60);
    }
  }
  /deep/ .van-field__control:disabled {
    color: #333;
    -webkit-text-fill-color: #333;
  }
}
.van-preview-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .van-swipe {
    width: 100%;
    height: 60%;

    .van-swipe-item {
      display: flex;
      align-items: center;

      img {
        width: 100%;
      }
    }
  }
}
</style>
